<template>
  <div class="playmate-report-container">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="searchForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        border>
        <el-table-column
          prop="playmateId"
          label="陪玩ID"
          width="100">
        </el-table-column>
        
        <el-table-column
          prop="playmateNickname"
          label="陪玩昵称"
          width="150">
        </el-table-column>
        
        <el-table-column
          prop="totalIncome"
          label="收入总额"
          width="120"
          :formatter="formatCurrency">
        </el-table-column>
        
        <el-table-column
          prop="orderCount"
          label="订单数量"
          width="120">
        </el-table-column>
        
        <el-table-column
          prop="avgRating"
          label="平均评分"
          width="120"
          :formatter="formatRating">
        </el-table-column>
        
        <el-table-column
          prop="lastOrderTime"
          label="最后接单时间"
          width="180"
          :formatter="formatDateTime">
        </el-table-column>
        
        <el-table-column
          prop="registerTime"
          label="注册时间"
          width="180"
          :formatter="formatDateTime">
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import adminApi from "@/http/adminApi";

export default {
  name: 'PlaymateReport',
  data() {
    return {
      loading: false,
      searchForm: {
        startTime: '',
        endTime: '',
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  
  created() {
    this.fetchData();
  },
  
  methods: {
    fetchData() {
      this.loading = true;
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime
      };
      
      adminApi.getPlaymateReportData(params)
        .then(response => {
          if (response.data && response.data.list) {
            this.tableData = response.data.list;
            this.total = response.data.total || 0;
          }
        })
        .catch(error => {
          console.error('获取陪玩报表数据失败:', error);
          this.$message.error('获取数据失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    onSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    
    onReset() {
      this.searchForm = {
        startTime: '',
        endTime: ''
      };
      this.currentPage = 1;
      this.fetchData();
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchData();
    },
    
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    
    formatCurrency(row, column, cellValue) {
      return `¥${parseFloat(cellValue).toFixed(2)}`;
    },
    
    formatRating(row, column, cellValue) {
      return cellValue ? parseFloat(cellValue).toFixed(2) : '暂无';
    },
    
    formatDateTime(row, column, cellValue) {
      if (!cellValue) return '';
      
      // 处理日期格式化
      const date = new Date(cellValue);
      if (isNaN(date.getTime())) return '';
      
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style scoped>
.playmate-report-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>